<template>
  <div id="threeBox" ></div>
</template>

<script>
import * as THREE from "three";

export default {
name: "basic2",
data() {
  return {
  }
},

methods: {

  init() {
    // 获取让其宽高相等
    let w = document.getElementById("threeBox").offsetWidth;
    let h = document.getElementById("threeBox").offsetHeight;
    
  //  场景
    let scene = new THREE.Scene()
    // 相机
    const camera = new THREE.PerspectiveCamera( 75, w / h, 0.1, 1000 ); //视角 狂高比 近截面远截面
    // 渲染器元素
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( w, h ); //渲染器大小
    document.getElementById("threeBox").appendChild( renderer.domElement ); //放到body里 
    // 创建几何体
    let geometry = new THREE.BoxGeometry(1,1,1) //几何体大小
    let material = new THREE.MeshBasicMaterial({color:0x00ff00}) //材质 : 网格默认材质
    let cube = new THREE.Mesh(geometry,material)//创建网格 把大小和材质放进去

    // 把几何体放进场景
    scene.add(cube)

    // 设置相机位置 两种方式
    // camera.position.x = 2
    // camera.position.y = 2
    camera.position.z = 5
    // camera.position.set(0,0,10)
    
    camera.lookAt(0,0,0)

    function an(){
      // 重复渲染
      requestAnimationFrame(an)

      cube.rotation.x += 0.01
      cube.rotation.y += 0.01
      
      renderer.render(scene,camera)
    }
    //渲染一次先
    an()
  },
},

watch: {},
computed: {},

created() {},
mounted() {
  this.init();
},
beforeDestroy() {
},
};
</script>

<style scoped lang="less">
#threeBox{
  width:400px;
 height: 400px; 
}
</style>